<template>
	<view>
		<!-- 顶部区域 -->
		<view class="top-container">
			<view class="top_img">
				<view class="weather">
					<view class="weather_img">
						<image :src="imageBaseUrl +  weather.temp " alt="" />
					</view>
					<view class="weather_text"><text style="font-size: 18px;">{{ weather.temp }}℃</text></view>
				</view>
				<view class="site">新乡</view>
				<view class="scenic_spot">王屋山景区</view>
				<view class="searchs">
					<image :src="imageBaseUrl + '/img/search.png'" alt="" />
					<input type="text" placeholder="搜索" />
				</view>
			</view>
			<view class="icon">
				<view class="buttons" @click="tickets">
					<view class="button_icon">
						<image :src="imageBaseUrl + '/img/ticket.png'" alt="" />
					</view>
					<view class="button_text">售票专区</view>
				</view>
				<view class="buttons" @click="nulls">
					<view class="button_icon">
						<image :src="imageBaseUrl + '/img/interpreter.png'" alt="" />
					</view>
					<view class="button_text">景点讲解</view>
				</view>
				<view class="buttons" @click="nulls">
					<view class="button_icon">
						<image :src="imageBaseUrl + '/img/atlas.png'" alt="" />
					</view>
					<view class="button_text">景区地图</view>
				</view>
				<view class="buttons" @click="nulls">
					<view class="button_icon">
						<image :src="imageBaseUrl + '/img/explain.png'" alt="" />
					</view>
					<view class="button_text">使用说明</view>
				</view>
				<view class="buttons" @click="nulls">
					<view class="button_icon">
						<image :src="imageBaseUrl + '/img/alarm.png'" alt="" />
					</view>
					<view class="button_text">演出预告</view>
				</view>
			</view>
		</view>

		<!-- 公告栏 -->
		<view class="notice">
			<view class="notice_img">
				<image :src="imageBaseUrl + '/img/playbacks.png'" alt="" />
			</view>
			<view class="notice_text">这里是公告</view>
		</view>

		<!-- 大图标区域 -->
		<view class="icon_big">
			<view class="icon_left" @click="nulls">
				<image :src="imageBaseUrl + '/img/strategy.png'" alt="" />
			</view>
			<view class="icon_right">
				<view class="right_top" @click="activity">
					<image :src="imageBaseUrl + '/img/activity.png'" alt="" />
				</view>
				<view class="right_bottom" @click="nulls">
					<image :src="imageBaseUrl + '/img/top.png'" alt="" />
				</view>
			</view>
		</view>

		<!-- 推荐景区 -->
		<view class="recommend">
			<view class="recommend_img">
				<image :src="imageBaseUrl + '/img/fire.png'" alt="" />
			</view>
			<view class="recommend_text">推荐景区</view>
			<view class="more">
				<view class="more_text">更多</view>
				<view class="more_img">
					<image :src="imageBaseUrl + '/img/right.png'" alt="" />
				</view>
			</view>
		</view>
		<!-- 修改：景区瀑布流组件 -->
		<uv-waterfall ref="scenicWaterfallRef" v-model="datas" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
			:column-gap="columnGap" @changeList="changeList1">
			<!-- 第一列数据 -->
			<template v-slot:list1> <!-- 修改：插槽名称改为list1 -->
				<view>
					<view v-for="(item, index) in datas.list1" :key="item.id" class="waterfall-item" @click="nulls">
						<view class="item-image-container">
							<image :src="item.image" mode="widthFix" class="item-image"
								@load="onImageLoad(item, $event)" :style="item.customStyle || ''" />
						</view>
						<view class="single_text">{{ item.name }}</view>
						<view class="single_score">
							<view class="mark">
								<view class="marknum">{{ item.score }}分</view>
								<view class="line"></view>
								<view class="discuss">评价{{ item.number }}</view>
							</view>
							<view class="like">
								<view class="like_img">
									<img :src="imageBaseUrl + '/img/heart.png'" alt="" />
								</view>
								<view class="like_num">{{ item.num }}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2> <!-- 修改：插槽名称改为list2 -->
				<view>
					<view v-for="(item, index) in datas.list2" :key="item.id" class="waterfall-item" @click="nulls">
						<view class="item-image-container">
							<image :src="item.image" mode="widthFix" class="item-image"
								@load="onImageLoad(item, $event)" :style="item.customStyle || ''" />
						</view>
						<view class="single_text">{{ item.name }}</view>
						<view class="single_score">
							<view class="mark">
								<view class="marknum">{{ item.score }}分</view>
								<view class="line"></view>
								<view class="discuss">评价{{ item.number }}</view>
							</view>
							<view class="like">
								<view class="like_img">
									<img :src="imageBaseUrl + '/img/heart.png'" alt="" />
								</view>
								<view class="like_num">{{ item.num }}</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>

		<!-- 推荐攻略 -->
		<view class="recommend">
			<view class="recommend_img">
				<image :src="imageBaseUrl + '/img/fire.png'" alt="" />
			</view>
			<view class="recommend_text">推荐攻略</view>
			<view class="more">
				<view class="more_text">更多</view>
				<view class="more_img">
					<image :src="imageBaseUrl + '/img/right.png'" alt="" />
				</view>
			</view>
		</view>

		<!-- 瀑布流组件 - 攻略部分 -->
		<uv-waterfall ref="guideWaterfallRef" v-model="list" :add-time="10" :left-gap="leftGap" :right-gap="rightGap"
			:column-gap="columnGap" @changeList="changeList">
			<!-- 第一列数据 -->
			<template v-slot:list1>
				<view>
					<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item" @click="nulls">
						<view class="item-image-container">
							<image :src="item.image" mode="widthFix" class="item-image"
								@load="onImageLoad(item, $event)" :style="item.customStyle || ''" />
						</view>
						<view class="item-content">
							<view class="single_text">{{ item.title }}</view>
							<view class="single_score">
								<view class="mark">
									<image class="imgs" :src="item.avatar" alt="" />
									<view class="discuss">{{ item.name }}</view>
								</view>
								<view class="like">
									<view class="like_img">
										<image :src="imageBaseUrl + '/img/heart.png'" alt="" />
									</view>
									<view class="like_num">{{ item.collect_num }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- 第二列数据 -->
			<template v-slot:list2>
				<view>
					<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item" @click="nulls">
						<view class="item-image-container">
							<image :src="item.image" mode="widthFix" class="item-image"
								@load="onImageLoad(item, $event)" :style="item.customStyle || ''" />
						</view>
						<view class="item-content">
							<view class="single_text">{{ item.title }}</view>
							<view class="single_score">
								<view class="mark">
									<image class="imgs" :src="item.avatar" alt="" />
									<view class="discuss">{{ item.name }}</view>
								</view>
								<view class="like">
									<view class="like_img">
										<image :src="imageBaseUrl + '/img/heart.png'" alt="" />
									</view>
									<view class="like_num">{{ item.collect_num }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>

		<view class="nulls">没有更多了~</view>

		<!-- 底部导航栏 -->
		<view class="navigation_bar">
			<view class="navigation">
				<view class="navigation_img">
					<image :src="imageBaseUrl + '/img/bigHouse.png'" alt="" />
				</view>
				<view class="navigation_text active" style="color: red">首页</view>
			</view>
			<view class="navigation">
				<view class="navigation_img">
					<image :src="imageBaseUrl + '/img/flower.png'" alt="" />
				</view>
				<view class="navigation_text">攻略</view>
			</view>
			<view class="navigation">
				<view class="navigation_imgs">
					<image :src="imageBaseUrl + '/img/aircraft.png'" :class="{ fly: a }" alt="" @click="take_off()" />
				</view>
				<view class="navigation_img">
					<image :src="imageBaseUrl + '/img/aircraft.png'" alt="" />
				</view>
				<view class="navigation_text">发布</view>
			</view>
			<view class="navigation">
				<view class="navigation_img">
					<image :src="imageBaseUrl + '/img/tree.png'" alt="" />
				</view>
				<view class="navigation_text">排行榜</view>
			</view>
			<view class="navigation" @click="my">
				<view class="navigation_img">
					<image :src="imageBaseUrl + '/img/me.png'" alt="" />
				</view>
				<view class="navigation_text">我的</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from "vue";
import api from '../../api/scenic/index.js';
import config from '../../config/index.js';
const imageBaseUrl = config.image;//图片地址
const imageUrl = config.baseUrl;//接口地址
// 定义响应式数据
const scenicWaterfallRef = ref(null) // 修改：使用独立引用
const guideWaterfallRef = ref(null)  // 修改：使用独立引用
const list = ref([])//  修改：数据结构改为数组
const datas = ref({ list1: [], list2: [] }) // 修改：数据结构改为对象
const list1 = ref([])//瀑布流左
const list2 = ref([])//瀑布流右
const leftGap = ref(10)//瀑布流列左间距
const rightGap = ref(10)//瀑布流列右间距
const columnGap = ref(10)//瀑布流列间距

// 记录图片实际加载尺寸
const imageSizes = ref({})
const loading = ref(true);
const errorMessage = ref('');
const weather = ref({});

// 和风天气API配置
const API_KEY = 'f9552385ed454177b461a7f1882afef8';
const GEO_API_URL = 'https://geoapi.qweather.com/v2/city/lookup';
const WEATHER_API_URL = 'https://devapi.qweather.com/v7/weather/now';


// 获取当前天气
const fetchCurrentWeather = async (cityId) => {
	try {
		const res = await uni.request({
			url: WEATHER_API_URL,
			method: 'GET',
			data: {
				location: cityId,
				key: API_KEY
			}
		});

		if (res.statusCode !== 200 || res.data.code !== '200') {
			throw new Error(`天气查询失败: ${res.data.message || res.statusCode}`);
		}

		return res.data.now;
	} catch (error) {
		console.error('获取天气数据失败:', error);
		throw error;
	}
};

// 获取天气数据主函数
const fetchWeatherData = async () => {
	loading.value = true;
	errorMessage.value = '';

	try {
		const cityId = 101180301;
		const currentWeather = await fetchCurrentWeather(cityId);
		weather.value = currentWeather;
	} catch (error) {
		errorMessage.value = error.message;
	} finally {
		loading.value = false;
	}
};

// 计算图片样式
const imageStyle = computed(() => {
	return (item) => {
		if (!item.w || !item.h) return {};

		// 获取屏幕宽度并计算列宽
		const screenWidth = uni.getSystemInfoSync().windowWidth
		const columnWidth = (screenWidth - leftGap.value - rightGap.value - columnGap.value) / 2

		// 根据图片原始宽高比计算显示高度
		const ratio = item.h / item.w
		const displayHeight = columnWidth * ratio

		return {
			width: columnWidth + 'px',
			height: displayHeight + 'px'
		}
	}
})
// 点击事件
const nulls = () => {
	uni.showToast({
		title: '待开发至中......',
		icon: 'none'
	});
}

// 图片加载完成事件处理
const onImageLoad = (item, event) => {
	// 获取图片的原始宽度和高度
	const { width, height } = event.detail || { width: 300, height: 200 } // 添加默认值

	// 保存图片尺寸信息
	imageSizes.value[item.id] = { width, height }

	// 更新图片样式
	const screenWidth = uni.getSystemInfoSync().windowWidth
	const columnWidth = (screenWidth - leftGap.value - rightGap.value - columnGap.value) / 2
	const ratio = height / width
	const displayHeight = columnWidth * ratio

	// 更新数据中的样式信息
	item.customStyle = `width: ${columnWidth}px; height: ${displayHeight}px;`

	// 通知瀑布流组件重新计算布局
	nextTick(() => {
		// 根据不同瀑布流组件调用刷新
		if (item.source === 'scenic') {
			if (scenicWaterfallRef.value && scenicWaterfallRef.value.refresh) {
				scenicWaterfallRef.value.refresh()
			}
		} else {
			if (guideWaterfallRef.value && guideWaterfallRef.value.refresh) {
				guideWaterfallRef.value.refresh()
			}
		}
	})
}

onMounted(() => {
	fetchWeatherData();

	// 获取系统信息用于计算布局
	api.strategy({ scenic_id: 3 }).then((res) => {
		list.value = res.data.map((item) => {
			return {
				...transformData(item),
				source: 'guide' // 标记为攻略数据
			}
		})
	})

	api.scenic({}).then((res) => {
		// 处理景区数据，分配到两列
		const transformedData = res.data.map((item) => {
			return {
				...transformData1(item),
				source: 'scenic' // 标记为景区数据
			}
		})
		// 平均分配到两列
		datas.value.list1 = transformedData.filter((_, index) => index % 2 === 0)
		datas.value.list2 = transformedData.filter((_, index) => index % 2 === 1)
	}).catch((err) => {
		console.error('景区数据请求失败:', err)
	})
})

// 瀑布流组件的数据变更处理
const changeList = (e) => {
	if (e.name === 'list1') {
		list1.value.push(e.value)
	} else if (e.name === 'list2') {
		list2.value.push(e.value)
	}
}
//活动
const activity = () => {
	uni.navigateTo({
		url: '/pages/activity/activity'
	})
}

// 修改：景区瀑布流的事件处理
const changeList1 = (e) => {
	if (e.name === 'list1') {
		datas.value.list1.push(e.value)
	} else if (e.name === 'list2') {
		datas.value.list2.push(e.value)
	}
}

// 数据格式转换
const transformData = (item) => {
	// 使用接口真实宽高或生成随机宽高比
	// 如果接口返回了图片尺寸，使用接口数据
	// 如果没有，生成随机比例(0.6-1.2)以确保错落有致
	const originalWidth = item.width || 300
	const originalHeight = item.height || originalWidth * (Math.random() * 0.6 + 0.6) // 随机高度比

	return {
		id: item.id,
		image: `${imageUrl}${item.img}`,
		avatar: `${imageUrl}${item.avatar}`,
		name: item.name,
		collect_num: item.collect_num,
		w: originalWidth,
		h: originalHeight,
		title: item.title,
		desc: item.introduce,
		// 初始时使用默认样式，图片加载后会更新
		customStyle: ''
	}
}

// 数据格式转换
const transformData1 = (item) => {
	// 使用接口真实宽高或生成随机宽高比
	// 如果接口返回了图片尺寸，使用接口数据
	// 如果没有，生成随机比例(0.6-1.2)以确保错落有致
	const originalWidth = item.width || 300
	const originalHeight = item.height || originalWidth * (Math.random() * 0.6 + 0.6) // 随机高度比

	return {
		id: item.id,
		image: `${imageUrl}${item.img}`,
		score: item.score,
		number: item.number,
		num: item.num,
		name: item.name,
		w: originalWidth,
		h: originalHeight,
		title: item.title,
		// 初始时使用默认样式，图片加载后会更新
		customStyle: ''
	}
}

// 飞机动画函数


// 跳转到个人页面
const my = () => {
	uni.redirectTo({
		url: '/pages/my/my'
	});
}
//  跳转到售票页面
const tickets = () => {
	uni.navigateTo({
		url: '/pages/tickets/tickets'
	})
}
</script>

<style scoped>
/* 顶部区域样式 */
.top-container {
	position: relative;
	margin-bottom: 20rpx;
}

.top_img {
	background-image: url(http://lxj.skych.top//img/panda.webp);
	background-size: cover;

	background-position: center;
	width: 100%;
	height: 520rpx;
	color: white;
	padding: 30rpx;
	box-sizing: border-box;
}

.weather {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	margin-top: 70px;
}

.weather_img image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.site {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.scenic_spot {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.searchs {
	display: flex;
	align-items: center;
	width: 100%;
	height: 60rpx;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 30rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.searchs image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 10rpx;
}

.searchs input {
	flex: 1;
	font-size: 26rpx;
	background-color: transparent;
	border: none;
	outline: none;
}

/* 功能图标区域 */
.icon {
	position: absolute;
	bottom: -70rpx;
	left: 30rpx;
	right: 30rpx;
	display: flex;
	background-color: white;
	border-radius: 16rpx;
	padding: 20rpx 0;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.buttons {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.button_icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10rpx;
}

.button_icon image {
	width: 50px;
	height: 50px;
}

.button_text {
	font-size: 24rpx;
	color: #666;
}

/* 公告栏 */
.notice {
	display: flex;
	align-items: center;
	height: 80rpx;
	background-color: #fff8e6;
	padding: 0 30rpx;
	margin: 80rpx 0 20rpx;
}

.notice_img image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 15rpx;
}

.notice_text {
	font-size: 26rpx;
	color: #ff9900;
}

/* 大图标区域 */
.icon_big {
	width: 98%;
	margin-left: 1%;
	height: 170px;
	display: flex;
	margin-top: 5px;
}

.icon_left {
	width: 48%;
	height: 100%;
}

.icon_left image {
	width: 100%;
	height: 100%;
}

.icon_right {
	width: 52%;
	height: 100%;
}

.icon_right image {
	width: 100%;
	height: 100%;
}

.right_top {
	height: 49%;
}

.right_bottom {
	height: 49%;
	margin-top: 1%;
}

/* 推荐区域 */
.recommend {
	display: flex;
	align-items: center;
	height: 80rpx;
	background-color: #f5f8fd;
	padding: 0 30rpx;
	margin-bottom: 20rpx;
	position: relative;
}

.recommend_img image {
	width: 36rpx;
	height: 36rpx;
	margin-right: 15rpx;
}

.recommend_text {
	font-size: 28rpx;
	color: #333;
}

.more {
	position: absolute;
	right: 30rpx;
	display: flex;
	align-items: center;
	background-color: white;
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.more_text {
	font-size: 24rpx;
	color: #666;
	margin-right: 10rpx;
}

.more_img image {
	width: 24rpx;
	height: 24rpx;
}

/* 瀑布流卡片样式 - 关键修改部分 */
.waterfall-item {
	background-color: white;
	border-radius: 16rpx;
	overflow: hidden;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.item-image-container {
	width: 100%;
	position: relative;
	overflow: hidden;
}

.item-image {
	width: 100%;
	display: block;
	/* 消除图片底部间隙 */
}

.single_text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	margin-bottom: 15rpx;
	line-height: 1.4;
	margin-top: 5px;
	margin-left: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* -webkit-line-clamp: 2; */
	-webkit-box-orient: vertical;
}

.single_score {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 24rpx;
	color: #666;
}

.mark {
	display: flex;
	align-items: center;
	margin-left: 5px;
	margin-bottom: 5px;
}

.imgs {
	width: 48rpx;
	height: 48rpx;
	border-radius: 24rpx;
	margin-right: 10rpx;
}

.like {
	display: flex;
	align-items: center;
	margin-right: 5px;
	margin-bottom: 5px;
}

.like_img image {
	width: 30rpx;
	height: 30rpx;
	margin-right: 8rpx;
}

.nulls {
	text-align: center;
	padding: 60rpx 0;
	font-size: 26rpx;
	color: #999;
}

/* 底部导航栏样式 */
.navigation_bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: white;
	display: flex;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.navigation {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.navigation_img image {
	width: 44rpx;
	height: 44rpx;
	margin-bottom: 8rpx;
}

.navigation_text {
	font-size: 22rpx;
	color: #666;
}

.active {
	color: #ff5050 !important;
}

.navigation_imgs {
	position: absolute;
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background-color: white;
	bottom: 50rpx;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 110;
}

.navigation_imgs image {
	width: 60rpx;
	height: 60rpx;
}

.fly {
	transform: translateY(-1050rpx);
	transition: 3s;
}

page {
	background-color: #f5f5f5;
	padding-bottom: 140rpx;
	/* 为底部导航栏留出空间 */
}
</style>

<style scoped lang="scss">
$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';

.waterfall-item__ft {
	padding: 20rpx;
	background: #fff;

	&__title {
		margin-bottom: 10rpx;
		line-height: 48rpx;
		font-weight: 700;

		.value {
			font-size: 32rpx;
			color: #303133;
		}
	}

	&__desc .value {
		font-size: 28rpx;
		color: #606266;
	}

	&__btn {
		padding: 10px 0;
	}
}
</style>